<template>
  <!-- 申请身份认证 -->
  <div style="padding-bottom: 30px" class="font-26 authentication">
    <assets-head :title="$t('初级认证')" />
    <!-- <country-list /> -->
    <div v-if="show">
      <div
        class="pt-58 pb-54 box-border border-b-color"
        v-if="disabled() || status === 3"
      >
        <div class="flex justify-between items-center px-30 textColor">
          <div class="font-50">{{ $t("身份认证") }}</div>
          <div class="flex items-center" v-if="resultArr[this.status]">
            <img
              :src="
                require(`@/assets/image/assets-center/${
                  resultArr[this.status] && resultArr[this.status].split('_')[0]
                }.png`)
              "
              alt="success img"
              class="w-36 h-36"
            />
            <div class="font-32 ml-18">
              {{
                resultArr[this.status] && resultArr[this.status].split("_")[1]
              }}
            </div>
          </div>
        </div>
        <div
          class="textColor pl-30 pr-30 mt-30 flex"
          v-if="status === 3 && msg"
        >
          <span> {{ $t("reason") }}:</span>
          <span class="break-word ml-10"> {{ msg }}</span>
        </div>
      </div>
      <div class="pl-30 pr-30">
        <div class="mb-40">
          <div class="mt-54 mb-25 font-24 textColor">{{ $t("国籍") }}</div>
          <div
            class="pt-28 pb-28 pl-38 pr-38 flex justify-between items-center rounded inputBackground textColor"
            @click="openBtn"
          >
            <div class="flex items-center">
              <!-- <div class="iti-flag mr-20" :class="countryCode" style="transform: scale(2.1)"></div> -->
              <div>{{ countryName }}</div>
            </div>

            <img
              v-if="resultArr.length === 0"
              src="../../assets/image/public/down-arrow.png"
              class="w-33 h-20"
              alt="arrow"
            />
          </div>
        </div>
        <ExInput
          :label="$t('真实姓名')"
          :disabled="disabled()"
          :clearBtn="!disabled()"
          :placeholderText="$t('请输入真实姓名')"
          v-model="name"
        />
        <ExInput
          :label="$t('证件/护照号码')"
          :disabled="disabled()"
          :clearBtn="!disabled()"
          :placeholderText="$t('请输入您的证件/护照号码')"
          v-model="idnumber"
        />
        <div>
          <div v-if="resultArr.length > 0" class="mt-4 mb-25 textColor">
            {{ $t("证件照/上传护照") }}
          </div>
          <div v-else class="mt-4 mb-25 textColor">
            {{ $t("证件/护照认证图片上传") }}
          </div>
          <div class="flex mt-33 mb-80 justify-between">
            <div
              class="flex-1 flex flex-col text-center justify-center items-center"
            >
              <div class="upload-wrap">
                <img
                  src="@/assets/image/kyc/0.png"
                  alt=""
                  class="w-full"
                  v-if="[1, 2].includes(status) && frontFile.length === 0"
                />
                <van-uploader
                  v-model="frontFile"
                  :max-count="1"
                  :disabled="disabled()"
                  :deletable="!disabled()"
                  :after-read="(file)=>afterRead(file,'frontFile')"
                  @delete="deleteImg('frontFile')"
                  :before-read="beforeRead"
                  v-else
                />
              </div>
              <div class="mt-32 font-26 h-20" style="color: #868d9a">
                {{ $t("证件正面") }}
              </div>
            </div>
            <div
              class="flex-1 flex flex-col text-center justify-center items-center"
            >
              <div class="upload-wrap">
                <img
                  src="@/assets/image/kyc/1.png"
                  alt=""
                  class="w-full"
                  v-if="[1, 2].includes(status) && reverseFile.length === 0"
                />
                <van-uploader
                  v-model="reverseFile"
                  :max-count="1"
                  :disabled="disabled()"
                  :deletable="!disabled()"
                  :after-read="(file)=>afterRead(file,'reverseFile')"
                  @delete="deleteImg('reverseFile')"
                  :before-read="beforeRead"
                  v-else
                />
              </div>
              <div class="mt-32 font-26 h-20" style="color: #868d9a">
                {{ $t("证件反面") }}
              </div>
            </div>
            <div
              class="flex-1 flex flex-col text-center justify-center items-center"
            >
              <div class="upload-wrap">
                <img
                  src="@/assets/image/kyc/2.png"
                  alt=""
                  class="w-full"
                  v-if="[1, 2].includes(status) && fileList.length === 0"
                />
                <van-uploader
                  v-model="fileList"
                  :max-count="1"
                  :disabled="disabled()"
                  :deletable="!disabled()"
                  :after-read="(file)=>afterRead(file,'fileList')"
                  @delete="deleteImg('fileList')"
                  :before-read="beforeRead"
                  v-else
                />
              </div>
              <div class="mt-32 font-26 h-20" style="color: #868d9a">
                {{ $t("手持证件照") }}
              </div>
            </div>
          </div>
        </div>
        <template v-if="!disabled()">
          <div class="font-35 mb-32 textColor">{{ $t("拍摄示例") }}</div>
          <img
            src="../../assets/image/kyc/kyc-demo.png"
            alt=""
            style="width: 100%; height: auto"
            class="w-756 h-220 mb-100"
          />
          <!-- 没有手持证件照的图 -->
          <!-- <div class="mb-100 flex justify-center">
                    <div class="flex flex-1 justify-center">
                        <img src="../../assets/image/kyc/kyc_demo1.png" alt="" class="w-220 h-220" />
                    </div>
                    <div class="flex flex-1 justify-center">
                        <img src="../../assets/image/kyc/kyc_demo2.png" alt="" class="w-220 h-220" />
                    </div>
                </div> -->
        </template>
        <button
          class="apply-btn btnMain text-white font-35 h-100 rounded"
          @click="onSubmit"
          v-if="!disabled()"
        >
          {{ $t("申请认证") }}
        </button>
        <div class="pt-35 pb-60 font-30" v-if="!disabled() || status === 3">
          <span class="text-grey">{{
            $t("上传证件照失败，请联系客服获取邮箱地址发送证件照或者重新上传")
          }}</span>
          <span class="text-blue service-text" @click="tokefu">
            {{ $t("联系客服") }}</span
          >
        </div>
        <nationality-list
          ref="controlChild"
          :title="$t('请选择国家')"
          @getName="getName(arguments)"
          v-if="!disabled()"
        >
        </nationality-list>
      </div>
    </div>
  </div>
</template>

<script>
// import { ActionSheet,Search } from 'vant';
import assetsHead from "@/components/assets-head";
import nationalityList from "./components/nationalityList.vue";
import { Uploader } from "vant";
import { _uploadImage, _applyIdentify, _getIdentify } from "@/API/fund.api";
// import CountryList from '@/components/country-list' // 我页不知道为啥要先调用这个，先放着
import countries from "./components/countryList";
import ExInput from "@/components/ex-input";
import {replaceImgUrl} from "@/utils/utis";
export default {
  name: "AuthenticationPage",
  components: {
    assetsHead,
    nationalityList,
    [Uploader.name]: Uploader,
    ExInput,
    // CountryList
  },
  data() {
    return {
      countryName: this.$t("请选择国家"), //国家名称
      countryCode: "af", //国家地区号
      idnumber: "",
      name: "",
      frontFile: [],
      reverseFile: [],
      fileList: [],
      curFile: "frontFile",
      status: "", // 0
      imgs: [],
      idcard_path_front_path: "",
      idcard_path_back_path: "",
      idcard_path_hold_path: "",
      resultArr: [
        "small-success_" + this.$t("已申请未审核"),
        "identifing_" + this.$t("审核中"),
        "small-success_" + this.$t("审核通过"),
        "icon-close_" + this.$t("审核未通过"),
      ], // 0 好像是未提交
      show: false,
      language: 'en',
      isLoad1: false,
      msg: "",
      isLoad2: false,
      isLoad3: false,
    }
  },
  created() {
    this.language = this.$i18n.locale;
    this.fetchInfo();
  },
  methods: {
    beforeRead(file){
      const imageTypeList = ['image/jpeg','image/jpg','image/png']
      if (!imageTypeList.includes(file.type)) {
        this.$toast(this.$t('上传图片只能是JPG、JPEG、PNG格式!'));
        return false;
      }
      return true;
    },
    deleteImg(type){
      switch (type){
        case 'frontFile':
          this.isLoad1 = false
          break;
        case 'reverseFile':
          this.isLoad2 = false
          break;
        case 'fileList':
          this.isLoad3 = false
          break;
      }
    },
    fetchInfo() {
      // 获取状态
      _getIdentify().then((data) => {
        this.show = true;
        this.status = data.status;
        this.msg = data.msg;
        if (data.status !== 0) {
          this.countryName =
            countries[this.language][data.nationality.toLowerCase()]["name"];
          this.countryCode = data.nationality.toLowerCase();
          this.idnumber = data.idnumber;
          this.name = data.name;
          this.frontFile = data.idimg_1
            ? [{ url: replaceImgUrl(data.idimg_1_path), resURL: data.idimg_1 }]
            : [];
          this.reverseFile = data.idimg_2
            ? [{ url: replaceImgUrl(data.idimg_2_path), resURL: data.idimg_2 }]
            : [];
          this.fileList = data.idimg_3
            ? [{ url: replaceImgUrl(data.idimg_3_path), resURL: data.idimg_3 }]
            : [];
          // 如果审核驳回 上传判断重新赋值为true
          this.isLoad1 = !!data.idimg_1
          this.isLoad2 = !!data.idimg_2
          this.isLoad3 = !!data.idimg_3
        }
      });
    },
/*    onClickUpload(type) {
      this.curFile = type;
    },*/
    onClickLeft() {
      this.$router.go(-1);
    },
    disabled() {
      // 是否禁用按钮
      return ![0, 3, ""].includes(this.status);
    },
    afterRead(file,type) { /// 处理文件
      file.status = 'uploading'
      file.message = this.$t('上传中...')
      _uploadImage(file).then(data => {
        file.status = 'success';
        file.message = this.$t('上传成功');
        file.resURL = data
        this[type] = [file]
        if(type === 'frontFile'){
          this.isLoad1 = true
        }else if(type === 'reverseFile'){
          this.isLoad2 = true
        }else{
          this.isLoad3 = true
        }
      }).catch(err => {
        file.status = 'failed';
        file.message = this.$t('图片上传失败');
      })
    },
    //打开国家列表底部弹窗
    openBtn() {
      if (!this.disabled()) {
        this.$refs.controlChild.open();
      }
    },
    //获取到当前选中国家的code值
    getName(params) {
      this.countryName = params[0];
      this.countryCode = params[1];
    },
    onSubmit() {
      if (!this.countryName) {
        this.$toast(this.$t("请选择国家"));
        return;
      }
      if (!this.name) {
        this.$toast(this.$t("请输入姓名"));
        return;
      }
      if (!this.idnumber) {
        this.$toast(this.$t("请输入证件号码"));
        return;
      }
      if (!this.frontFile.length || !this.reverseFile.length || !this.fileList.length) {
        this.$toast(this.$t('请上传完整证件信息'))
        return
      }
      if (!this.isLoad1) {
        this.$toast(this.$t('证件正面上传失败,请重新上传'))
        return
      }
      if (!this.isLoad2) {
        this.$toast(this.$t('证件反面上传失败,请重新上传'))
        return
      }
      if (!this.isLoad3 ) {
        this.$toast(this.$t('手持证件上传失败,请重新上传'))
        return
      }
      _applyIdentify({
        name: this.name,
        idname:'id/passpost',
        idnumber: this.idnumber,
        idimg_1: this.frontFile.length && this.frontFile[0].resURL || '',
        idimg_2: this.reverseFile.length && this.reverseFile[0].resURL || '',
        idimg_3:  this.fileList.length && this.fileList[0].resURL || '',
        nationality: this.countryCode, // this.countryName 存储的 code, 回来再遍历
      })
        .then(() => {
          this.$toast(this.$t("提交成功"));
          this.$router.push({ path: "/verified", query: { type: "identity" } });
          // this.fetchInfo()
        })
        .catch((err) => {
          if (err.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (err.msg !== undefined) {
            this.$toast(this.$t(err.msg));
          }
        });
    },
    tokefu() {
      this.$router.push("/customerService");
    },
  },
};
</script>
<style lang="scss" scoped>
.authentication {
  width: 100%;
  box-sizing: border-box;
}

.upload-wrap {
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

input {
  font-size: 35px;
}

input:disabled {
  background: #fff;
}

.list-view {
  overflow-y: scroll;
  border-bottom: 1px solid #e5e5e5;
}

.kyc-input {
  width: 100%;
  border: none;
}

.apply-btn {
  border: none;
  outline: none;
  width: 100%;
  line-height: 100px;
}

.service-text {
  text-decoration: underline;
}

.break-word {
  word-wrap: break-word;
}
</style>
